/* 1.背景图：可以移动 */
body{
	/* 背景复合属性：路径地址：相对路径+图片全称 */
	background: url(../img/bg.jpg);
	/* 背景图尺寸 数值px/%   宽度X  高度Y*/
	background-size: 100% 927px;
	background-repeat: no-repeat;
}
/* 2.标题 */
h1{
	/* 文字放大 */
	font-size: 50px;
	/* 文本字体：华文彩云 */
	font-family: "华文彩云";
	/* 文本加粗:100-900 */
	font-weight: 500;
	/* 文本阴影 X Y 模糊尺寸 颜色*/
	text-shadow: 5px 5px 10px #ff0;
	/* 字体颜色 */
	color:#f00;
	/* 透明度 */
	opacity: 0.3;
}
/* 3.熊  --空间+背景图 --移动 */
#bear{
	width: 400px;
	height: 400px;
	bor der: 1px solid red;
	/* 背景图 */
	background: url(../img/bear_1.png) no-repeat;
	/* 背景图占满整个熊空间 */
	background-size: 100% 100%;
	/* 定位 */
	position: relative;
	top: -31px;
	left: -52px;
	/* 启动动画 */
	animation: bear 5s linear infinite;
}

/* 创建关键帧  背景图改变 位置改变 */
@keyframes bear{
	0%{
		/* 第一组动画：必须熊原始位置 */
		background: url(../img/bear_1.png) no-repeat;
		/* 背景尺寸 */
		background-size: 100% 100%;
		top: -31px;
		left: -52px;
		transform: rotate(720deg) scale(1.2);
	}
	10%{
		background: url(../img/bear_1.png) no-repeat;
		background-size: 100% 100%;
		top: 0px;
		left: 0px;
		transform: rotate(720deg) scale(1.2);
	}
	20%{
		background: url(../img/bear_2.png) no-repeat;
		background-size: 100% 100%;
		top: 234px;
		left: 256px;
		transform: rotate(720deg) scale(1.2);
	}
	30%{
		background: url(../img/bear_3.png) no-repeat;
		background-size: 100% 100%;
		top: -82px;
		left: 506px;
		transform: rotate(720deg) scale(1.2);
	}
	40%{
		background: url(../img/bear_4.png) no-repeat;
		background-size: 100% 100%;
		top: 98px;
		left: 631px;
		transform: rotate(720deg) scale(1.2);
	}
	50%{
		background: url(../img/bear_5.png) no-repeat;
		background-size: 100% 100%;
		top: 420px;
		left: 647px;
		transform: rotate(720deg) scale(1.2);
	}
	60%{
		background: url(../img/bear_6.png) no-repeat;
		background-size: 100% 100%;
		top: -40px;
		left: -716px;
		transform: rotate(720deg) scale(1.2);
	}
	70%{
		background: url(../img/bear_7.png) no-repeat;
		background-size: 100% 100%;
		top: 108px;
		left: 982px;
		transform: rotate(720deg) scale(1.2);
	}
	80%{
		background: url(../img/bear_8.png) no-repeat;
		background-size: 100% 100%;
		top: -150px;
		left: 1303px;
		transform: rotate(720deg) scale(1.2);
	}
	90%{
		background: url(../img/bear_9.png) no-repeat;
		background-size: 100% 100%;
		top: 237px;
		left: 659px;
		transform: rotate(720deg) scale(1.2);
	}
	100%{
		background: url(../img/bear_10.png) no-repeat;
		background-size: 100% 100%;
		top: 413px;
		left: 222px;
		transform: rotate(720deg) scale(1.2);
	}
}